<template>
	<div class="dealer-container">
		<div class="betslip">
			<strong class="strong">
				{{ formatObSettleTitle(dataList.obSettleCount) }}
			</strong>
			<div>
				<el-row class="paddingLR paddingB">
					<el-col :span="6">
						{{ $t('game.game_betslip.bet_number') }}：
						{{ dataList.id || '-' }}
					</el-col>
					<el-col :span="6">
						{{ $t('game.game_betslip.generated_id') }}：
						{{ dataList.generatedId || '-' }}
					</el-col>
					<el-col :span="6">
						{{ $t('game.game_betslip.venue_name_details') }}：
						{{ dataList.venueName || '-' }}
					</el-col>
					<el-col :span="6">
						{{ $t('game.game_betslip.color_name') }}：
						{{ dataList.gameTypeName || '-' }}
					</el-col>
					<el-col :span="6">
						{{ $t('game.game_betslip.bet_status') }}：
						{{ typeFilter(dataList.obBetStatus, 'betStatusType') }}
					</el-col>
					<el-col :span="6">
						{{ $t('game.game_betslip.issue_no') }}：
						{{ dataList.ticketPlanNo || '-' }}
					</el-col>
					<el-col :span="6">
						{{ $t('game.game_betslip.pattern') }}：
						{{ dataList.betModel || '-' }}元
					</el-col>
					<el-col :span="6">
						{{ $t('game.game_betslip.oddsValues') }}：
						{{ dataList.oddsValue || '-' }}
					</el-col>
					<el-col :span="6">
						{{ $t('game.game_betslip.bet_content') }}：
						<span>
							{{ dataList.betContent || '-' }}
						</span>
					</el-col>
					<el-col :span="6">
						{{ $t('game.game_betslip.award_content') }}：

						<span>
							{{ dataList.judgeResultCn || '-' }}
						</span>
					</el-col>
					<el-col :span="6">
						{{ $t('game.game_betslip.netAmount') }}：
						<span :style="{color: amountColor(dataList.netAmount)}">
							<span v-if="lookMsgList.memberCurrency === 'VND'">
								{{
									handleNumber(
										lookMsgList.memberCurrency,
										dataList.netAmount
									)
								}}
							</span>
							<span v-else>
								{{
									dataList.netAmount !== null
										? handleNumber(
											lookMsgList.memberCurrency,
											dataList.netAmount
										)
										: '-'
								}}
							</span>
					</span>
					</el-col>
					<el-col :span="6">
						{{ $t('game.game_betslip.bet_device') }}：
						{{
							dataList.obDeviceType === '其他'
								? dataList.obDeviceType
								: typeFilter(
										dataList.obDeviceType,
										'loginDeviceType'
								  )
						}}
					</el-col>
					<el-col :span="6">
						{{ $t('game.game_betslip.bet_ip') }}：
						{{ dataList.loginIp || '-' }}
					</el-col>
					<el-col :span="6">
						{{ $t('game.game_betslip.bet_time') }}：
							<span :style="markSettleCountRed(dataList.obSettleCount)">
							{{ dataList.createAtString || '-' }}
						</span>
					</el-col>
					<el-col :span="6">
						{{ $t('game.game_betslip.settle_time') }}：
						<span :style="markSettleCountRed(dataList.obSettleCount)">
							{{ dataList.netAtString || '-' }}
						</span>
					</el-col>
					<el-col :span="6">
						{{ $t('game.game_betslip.ob_created_at') }}：
						<span :style="markSettleCountRed(dataList.obSettleCount)">
							{{ dataList.obCreatedAt || '-' }}
						</span>
					</el-col>
					<el-col :span="6" v-if="!isReset">
						是否重算： <span v-if="lookMsgList.obBetStatus === 1" :style="markSettleCountRed(dataList.obSettleCount)">
								{{ formatObSettleCount(dataList.obSettleCount) }}
							</span>
							<span v-else> - </span>
					</el-col>
				</el-row>
			</div>
			<el-table
				border
				size="mini"
				class="small-size-table"
				:data="tableData"
				style="width: 100%"
				:header-row-style="{
					height: '24px',
					lineHeight: '24px',
					background: '#000'
				}"
			>
				<el-table-column
					prop="playName"
					:label="`${$t('game.game_betslip.play_name')}`"
					align="center"
				>
					<template slot-scope="scope">
						{{ scope.row.playName || '-' }}
					</template>
				</el-table-column>
				<el-table-column
					prop="betCount"
					:label="`${$t('game.game_betslip.notes')}`"
					align="center"
				>
					<template slot-scope="scope">
						{{ scope.row.betCount || '-' }}
					</template>
				</el-table-column>
				<el-table-column
					prop="betMultiple"
					:label="`${$t('game.game_betslip.multiple')}`"
					align="center"
				>
					<template slot-scope="scope">
						{{ scope.row.betMultiple || '-' }}
					</template>
				</el-table-column>
				<el-table-column
					prop="betAmount"
					:label="`${$t('game.game_betslip.bet_amount')}`"
					align="center"
				>
					<template slot-scope="scope">
						<span v-if="lookMsgList.memberCurrency === 'VND'">
							{{ handleCurrency(lookMsgList.memberCurrency)
							}}{{ scope.row.betAmount }}
						</span>
						<span v-else>
							{{
								scope.row.betAmount !== null
									? handleNumber(
										lookMsgList.memberCurrency,
										scope.row.betAmount )
									: '-'
							}}
						</span>
					</template>
				</el-table-column>
				<el-table-column
					prop="betStatus"
					:label="`${$t('game.game_betslip.state')}`"
					align="center"
				>
					<template slot-scope="scope">
						{{ _typeFilter(scope.row.betStatus, 'cpStatusArr') }}
					</template>
				</el-table-column>
			</el-table>
		</div>
	</div>
</template>

<script>
import list from '@/mixins/list'
import gameMixins from '../../mixins/index'

export default {
	name: 'CpDetails',
	components: {},
	mixins: [list, gameMixins],
	props: {
		dataList: {
			type: Object,
			default: () => ({})
		},
		lookMsgList: {
			type: Object,
			default: () => ({})
		}
	},
	data() {
		return {
			gameTypeList: {},
			tableData: []
		}
	},
	computed: {
		betStatusType() {
			return this.globalDics.betStatusType || []
		},
		cpStatusArr() {
			return [
				{
					code: '0',
					description: this.$t('game.game_betslip.unsettlement')
				},
				{
					code: '1',
					description: this.$t('game.game_betslip.has_won_prize')
				},
				{
					code: '4',
					description: this.$t('game.game_betslip.failure_win_prize')
				},
				{
					code: '15',
					description: this.$t('game.game_betslip.revoke')
				}
			]
		}
	},
	watch: {
		dataList: {
			handler: function() {
				this.tableData = []
				this.assignTableData(this.dataList)
			},
			deep: true,
			immediate: true
		}
	},
	methods: {
		assignTableData(row) {
			this.tableData.push({
				playName: row.playName,
				betCount: row.betCount,
				betMultiple: row.betMultiple,
				betAmount: row.betAmount,
				betStatus: row.betStatus
			})
		},
		_typeFilter(val, type) {
			const res = this.cpStatusArr.find(
				(item) => item.code === String(val)
			)
			return res?.description || '-'
		},
		getGameTypeList() {
			this.$api.getMerchantGameGamePlant().then((res) => {
				if (res && res.code === 200) {
					this.gameTypeList = res.data || []
				}
			})
		},
		amountColor (num) {
			if (parseFloat(num) > 0) return 'rgb(75, 121, 2)'
			if (parseFloat(num) < 0) return 'rgb(217, 0, 27)'

			return ''
		}
	}
}
</script>

<style lang="scss" scoped>
.paddingLR {
	padding: 0 30px;
}
::v-deep .betslip {
	line-height: 30px;
	padding: 30px;
	.strong {
		line-height: 70px;
	}
	.paddingB {
		padding-bottom: 30px;
	}
	th {
		color: #ffff;
		background: #000;
		border: 1px solid #000;
	}
}
.tipsBox {
	height: 30px;
	line-height: 30px;
	.tipsH {
		max-width: 100px;
		overflow: hidden;
		display: inline-block;
	}
	.tipsC {
		max-width: 140px;
		overflow: hidden;
		display: inline-block;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
}
</style>
